<html>

<head>

  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>

  <script type="text/javascript" src="dom-to-image.js"></script>
  <script type="text/javascript" src="FileSaver.js"></script>

  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="dom-to-image.js"></script>
  <script type="text/javascript" src="FileSaver.js"></script>
</head>

<body>
  <canvas id="c" width="800" height="800" style="margin-left: 200px; border: 1px red solid;"></canvas>
</body>

<script  type="text/javascript">
    data = {
      y: ["一月", "二月", "三月", "四月", "五月", "六月"],
      x: ["0", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"],
      val: [],
      col: ["red", "green", "blue", "skyblue", "limegreen", "pink"]
    }

    while (data.val.length < 6) {
      data.val.push(Math.floor(Math.random() * (500 - 100 + 1) + 100))//随机数
    }
    console.log( data.val);

    var c = document.querySelector('#c');//获取canvas
    var ctx = c.getContext('2d');//给这个变成2d画板并赋予名字
    ctx.translate(50, 700)//向下移动坐标

    //y轴
    ctx.beginPath()
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -600);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = '1'
    ctx.stroke()

    //x轴
    ctx.beginPath()
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = '1'
    ctx.stroke();

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle'

    for (var i = 0; i < data.val.length; i++) {
      console.log(data.val[i]);
      //把上面的数据画入画板
      ctx.beginPath();
      // ctx.moveTo(70 * (i + 1), 0)
      ctx.moveTo(0,70 * (i + 1))
      ctx.lineTo(70 * (i + 1), -data.val[i] / 2)
      // ctx.lineTo(-data.val[i] / 2,70 * (i + 1) )

      ctx.strokeStyle = data.col[i]
      ctx.lineWidth = '30';//加粗
      ctx.stroke();

      ctx.fillText(data.val[i], 70 * (i + 1), -data.val[i] / 2 - 10)//高度数据的填入
      ctx.fillText(data.x[i], 70 * (i + 1), 10)//月份写入

    }

    //下面是给y轴写出计量数，再给他画上计量数的对应点
    // for (var i = 0; i < data.y.length; i++) {
    //   ctx.beginPath()
    //   ctx.moveTo(0, -50 * i)
    //   ctx.lineTo(-5, -50 * i)
    //   ctx.lineWidth = '2';
    //   ctx.strokeStyle = 'black'
    //   ctx.stroke();
    //   ctx.fillText(data.y[i], -20, -50 * i)
    // }
</script>

</html>